{extend name="public:layout" /}
{block name="title"}规则复制{/block}
{block name="head"}
{/block}
{block name="body"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox">
        <div class="ibox-title">
            <ol class="breadcrumb">
                <li><i class="fa fa-hand-o-right"></i> <a href="{:url('index',['utype'=>$Request.param.utype])}">
                    规则管理</a></li>
                <li class="active">规则复制</li>
            </ol>
        </div>
        <div class="ibox-content">
            <div class="wrapper wrapper-content  animated fadeInRight">
                <div class="row">
                    <div class="col-sm-4">
                        <div id="nestable-menu">
                            <button type="button" data-action="expand-all" class="btn btn-white btn-sm">展开所有</button>
                            <button type="button" data-action="collapse-all" class="btn btn-white btn-sm">收起所有</button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="ibox ">
                            <div class="ibox-title">
                                <h5>复制来源</h5>
                            </div>
                            <div class="ibox-content">

                                <p class="m-b-lg">
                                    <select name="from" class="form-control" id="from">
                                        <option value="">选择</option>
                                        <option value="system">系统模块</option>
                                        <option value="site">店铺模块</option>
                                        <option value="member">会员模块</option>
                                        <option value="operator">店铺操作员模块</option>
                                    </select>
                                </p>

                                <div class="dd" id="nestable">
                                    <ol class="dd-list" id="from1">
                                        <div class="dd-empty"></div>
                                    </ol>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="ibox ">
                            <div class="ibox-title">
                                <h5>复制目标</h5>
                            </div>
                            <div class="ibox-content">

                                <p class="m-b-lg">
                                    <select name="to" class="form-control m-b" id="to">
                                        <option value="">选择</option>
                                        <option value="system">系统模块</option>
                                        <option value="site">店铺模块</option>
                                        <option value="member">会员模块</option>
                                        <option value="operator">店铺操作员模块</option>
                                    </select>
                                </p>

                                <div class="dd" id="nestable2">
                                        <div class="dd-empty"></div>
                                </div>
                            </div>
                            <button type="button" onclick="setTree()" class="btn btn-danger">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/public/plugins/nestable/jquery.nestable.js"></script>
<script src="/public/plugins/template/template.js"></script>
<script type="text/html" id="tpl">
    {{each datas  value index }}
    <li class="dd-item" data-id="{{value.rule_id}}">
        <div class="dd-handle">{{value.title}}</div>
        {{if value.is_son }}
        <ol class="dd-list" style="">
            {{each value.children  val key}}
                <li class="dd-item" data-id="{{val.rule_id}}">
                    <div class="dd-handle">{{val.title}}</div>
                </li>
            {{/each}}
        </ol>
        {{ /if }}
    </li>
    {{ /each }}
</script>
<script type="text/javascript">
    $(document).ready(function () {
        var updateOutput = function (e) {
            var list = e.length ? e : $(e.target), output = list.data("output");
            if (window.JSON) {
                output.val(window.JSON.stringify(list.nestable("serialize")))
            } else {
                output.val("浏览器不支持")
            }
        };
        $("#nestable").nestable({group: 1}).on("change", updateOutput);
        $("#nestable2").nestable({group: 1}).on("change", updateOutput);
        updateOutput($("#nestable").data("output", $("#nestable-output")));
        updateOutput($("#nestable2").data("output", $("#nestable2-output")));
        $("#nestable-menu").on("click", function (e) {
            var target = $(e.target), action = target.data("action");
            if (action === "expand-all") {
                $(".dd").nestable("expandAll")
            }
            if (action === "collapse-all") {
                $(".dd").nestable("collapseAll")
            }
        })
    });

    $('#from').change(function () {
        var change=$(this).val();
        getTree('nestable',change);
    });
    $('#to').change(function () {
        var change=$(this).val();
        getTree('nestable2',change);
    });
    function getTree(type, utype) {
        $('#'+type).empty();
        $.get('{:url("copyCate")}',{utype:utype},function (data) {
            var html=template('tpl',{datas:data});
            if (html.length){
                $('#'+type).append('<ol class="dd-list">'+html+'</ol>')
            }else {
                $('#'+type).append('<div class="dd-empty"></div>')
            }
        })
    }
    function setTree() {
        var data=$('#nestable2').nestable('serialize');
        $.post('{:url("copyCate")}',{tree:data,utype:$('#to').val()},function (data) {
            console.log(data);
        })
    }
</script>
{/block}

